
.cp-rank-columns,
.cp-rank-item {
  width: 100%;

  &.self {
    margin-left: -8px;
    margin-top: 8px;
    width: calc(100% + 16px);
    background: #deeeff;
    @include borderRadius(5px);
    padding: 5px 1rem;

    > .inner {
      text-align: center;
      white-space: nowrap;

      .profile {
        width: 33%;
      }
    }
  }

  > .inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 1.4rem;
    font-weight: 800;

    > div {
      //text-align: center;
      width: 33%;
    }

    .rank {
      color: #999;
    }

    .profile {
      width: 100%;
      display: flex;
      align-items: center;
      color: #333;


      .adm-image.adm-avatar {
        width: 3.2rem !important;
        height: 3.2rem !important;
        @include borderRadius(50px);
        margin-right: 8px;
      }
    }

    .value{
      white-space: nowrap;
      color: var(--adm-color-primary);
    }
  }
}

.cp-rank-item {
  @include boxSize();
  padding: 5px 1.6rem;

}

.cp-rank-columns {
  background: #b4e2fa;
  height: 3.6rem;
  color: var(--adm-color-primary);
  padding: 0 1.6rem;
  @include boxSize();
  @include borderRadius(18px 18px 0 0);

  > .inner {
    font-size: 1.6rem;
  }
}

